/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState } from 'react';
import { ModalForm } from '@ant-design/pro-form';
import { Col, Row, Descriptions, Space } from 'antd';
import { getRanString } from '@/pages/sms/TemplateAudit/components/utils';
import type { StringObjType } from '../../AmountApply/index.d';
import { getInvoiceTitle } from '@/services/finance_receipt';
import PreviewImage from './PreviewImage';
import styles from './index.less';

const titleCoulmns = [
  [
    {
      label: '开票抬头',
      dataIndex: 'invoice_title',
    },
    {
      label: '纳税人识别号',
      dataIndex: 'taxpayer_unionid',
    },
    {
      label: '开户行',
      dataIndex: 'bank_name',
    },
    {
      label: '开户账号',
      dataIndex: 'bank_account',
    },
    {
      label: '公司注册地址',
      dataIndex: 'company_address',
    },
    {
      label: '联系方式',
      dataIndex: 'contact',
    },
    {
      label: '营业执照',
      dataIndex: 'license_name',
    },
    {
      label: '纳税人资格证明',
      dataIndex: 'qualification_name',
    },
    {
      label: '可开票金额',
      dataIndex: 'total_money',
    },
  ],
  [
    {
      label: '备注',
      dataIndex: 'comment',
    },
    {
      label: '邮递信息',
      dataIndex: '1',
    },
    {
      label: '收件人',
      dataIndex: 'receiver_name',
    },
    {
      label: '收件地址',
      dataIndex: 'receiver_address',
    },
  ],
];

const InvoiceTitle: React.FC<{ data: StringObjType }> = (props) => {
  const { data } = props;
  const { shop_info_id } = data || {};
  const [visible, setVisible] = useState<boolean>(false);
  const [info, setInfo] = useState<StringObjType>({});
  const getTitleInfo = async () => {
    const { code, data: datainfo } = await getInvoiceTitle({ shop_info_id });
    if (code == 0) {
      setInfo({
        ...data,
        ...datainfo,
      });
    }
  };

  useEffect(() => {
    if (visible && shop_info_id) {
      getTitleInfo();
    }
  }, [shop_info_id, visible]);

  useEffect(() => {
    if (!visible) {
      setInfo({});
    }
  }, [visible]);

  const cardSpan = { xs: 24, sm: 24, md: 24, lg: 12 };

  const renderItem = (item: StringObjType) => {
    const { dataIndex } = item || {};
    switch (dataIndex) {
      case 'license_name':
        return (
          <Space align='start' wrap>
            <span>{info[dataIndex]}</span>
            {info.license_url && (
              <PreviewImage src={info.license_url}>
                <a>查看</a>
              </PreviewImage>
            )}
          </Space>
        );
      case 'qualification_name':
        return (
          <Space align='start' wrap>
            <span>{info[dataIndex]}</span>
            {info.qualification_url && (
              <PreviewImage src={info.qualification_url}>
                <a>查看</a>
              </PreviewImage>
            )}
          </Space>
        );
      default:
        return info[dataIndex];
    }
  };

  return (
    <ModalForm
      title='开票信息'
      trigger={<a>详情</a>}
      width={700}
      modalProps={{
        destroyOnClose: true,
        footer: null,
        centered: true,
      }}
      onVisibleChange={setVisible}
      submitter={false}
    >
      <Row>
        {titleCoulmns.map((item) => (
          <Col {...cardSpan} key={getRanString()}>
            <Descriptions column={1}>
              {item.map((itemm) => (
                <Descriptions.Item
                  key={getRanString()}
                  label={itemm.label}
                  className={styles.descriptionItem}
                >
                  {renderItem(itemm)}
                </Descriptions.Item>
              ))}
            </Descriptions>
          </Col>
        ))}
      </Row>
    </ModalForm>
  );
};

export default InvoiceTitle;
